<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DynaPart-TP 线程池监控中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-30">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-3">
            <div class="bg-primary text-white p-2 rounded-lg">
                <i class="fa fa-cogs text-xl"></i>
            </div>
            <h1 class="text-xl font-bold">DynaPart-TP</h1>
        </div>
        <div class="flex items-center space-x-6">
            <div class="hidden md:flex items-center space-x-1 text-sm text-gray-600">
                <i class="fa fa-clock-o"></i>
                <span id="current-time">加载中...</span>
            </div>
            <div class="relative">
                <button class="flex items-center space-x-1 focus:outline-none">
                    <span class="hidden md:inline text-sm font-medium">管理员</span>
                    <i class="fa fa-user-circle-o text-xl"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<main class="container mx-auto px-4 pt-20 pb-16">
    <!-- 页面标题和统计 -->
    <div class="mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2">线程池监控总览</h2>
        <p class="text-gray-600">实时监控和管理所有线程池资源</p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
            <div class="bg-white rounded-xl p-5 card-shadow flex items-center">
                <div class="bg-primary/10 p-3 rounded-lg mr-4">
                    <i class="fa fa-tasks text-primary text-2xl"></i>
                </div>
                <div>
                    <p class="text-gray-500 text-sm">总线程池数量</p>
                    <p class="text-2xl font-bold" id="total-pool-count">0</p>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow flex items-center">
                <div class="bg-secondary/10 p-3 rounded-lg mr-4">
                    <i class="fa fa-bolt text-secondary text-2xl"></i>
                </div>
                <div>
                    <p class="text-gray-500 text-sm">总线程数</p>
                    <p class="text-2xl font-bold" id="total-active-threads">0</p>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow flex items-center">
                <div class="bg-warning/10 p-3 rounded-lg mr-4">
                    <i class="fa fa-list-alt text-warning text-2xl"></i>
                </div>
                <div>
                    <p class="text-gray-500 text-sm">排队任务总数</p>
                    <p class="text-2xl font-bold" id="total-queued-tasks">0</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 线程池列表 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-5 border-b border-gray-100">
            <h3 class="font-bold text-lg">线程池列表</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">线程池名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">核心线程数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最大线程数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">队列类型</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">拒绝策略</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody id="pool-table-body" class="bg-white divide-y divide-gray-200">
                <!-- 线程池数据将通过JavaScript动态加载 -->
                <tr>
                    <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                        <p>加载中...</p>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</main>

<script>
    // 更新当前时间
    function updateCurrentTime() {
        const now = new Date();
        const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
        document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
    }

    setInterval(updateCurrentTime, 1000);
    updateCurrentTime();

    // 格式化数字显示
    function formatNumber(num) {
        return num.toLocaleString('zh-CN');
    }

    // 加载所有线程池信息
    function loadAllThreadPoolInfo() {
        fetch('/monitor/pools')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(pools => {
                // 更新总计数
                document.getElementById('total-pool-count').textContent = formatNumber(pools.length);

                // 计算总线程数（核心+最大的估算）和排队任务（需要额外请求，这里简化）
                let totalThreads = 0;
                let totalQueued = 0;

                pools.forEach(pool => {
                    totalThreads += (pool.maxNums || 0);
                    // 实际项目中应调用/monitor/tasks接口获取真实队列数
                    totalQueued += 0;
                });

                document.getElementById('total-active-threads').textContent = formatNumber(totalThreads);
                document.getElementById('total-queued-tasks').textContent = formatNumber(totalQueued);

                // 更新表格内容
                const tableBody = document.getElementById('pool-table-body');
                tableBody.innerHTML = '';

                if (pools.length === 0) {
                    tableBody.innerHTML = `
                            <tr>
                                <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                                    <p>没有找到线程池数据</p>
                                </td>
                            </tr>
                        `;
                    return;
                }

                pools.forEach(pool => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-colors';
                    row.innerHTML = `
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-medium text-gray-900">${pool.poolName}</div>
                                <div class="text-sm text-gray-500">${pool.threadName || '-'}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>${pool.coreNums || 0}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>${pool.maxNums || 0}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>${pool.queueName || '-'}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>${pool.rejectStrategyName || '-'}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="/detail.html?poolName=${encodeURIComponent(pool.poolName)}" class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-eye mr-1"></i>监控
                                </a>
                                <a href="/detail.html?poolName=${encodeURIComponent(pool.poolName)}#settings" class="text-secondary hover:text-secondary/80">
                                    <i class="fa fa-sliders mr-1"></i>配置
                                </a>
                            </td>
                        `;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('加载线程池信息失败:', error);
                const tableBody = document.getElementById('pool-table-body');
                tableBody.innerHTML = `
                        <tr>
                            <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                                <p>加载失败: ${error.message}</p>
                                <button onclick="loadAllThreadPoolInfo()" class="mt-2 text-primary hover:underline">
                                    重试
                                </button>
                            </td>
                        </tr>
                    `;
            });
    }

    // 页面加载时加载数据
    document.addEventListener('DOMContentLoaded', function() {
        loadAllThreadPoolInfo();

        // 每30秒自动刷新一次数据
        setInterval(loadAllThreadPoolInfo, 30000);
    });
</script>
</body>
</html>
